<template>
	<template v-if="!isInner">
		<el-drawer
			v-model="drawerVisible"
			:title="title"
			size="80%"
			:destroy-on-close="true"
			@close="handleClose"
		>
			<div class="p-4">
				<div>
					<!-- 搜索区域 -->
					<div class="mb-4">
						<BasicTableFrom :formList="formList" @search="handleSearch">
							<template #menu>
								<el-button type="primary" @click="handleExport">导出</el-button>
							</template>
						</BasicTableFrom>
					</div>

					<!-- 表格 -->
					<BasicTable
						:data="tableData"
						:option="tableColumns"
						:table-loading="loading"
						v-model:page="page"
					/>
				</div>
			</div>
		</el-drawer>
	</template>
	<template v-else>
		<div>
			<!-- 搜索区域 -->
			<div class="mb-4">
				<BasicTableFrom :formList="formList" @search="handleSearch">
					<template #menu>
						<el-button type="primary" @click="handleExport">导出</el-button>
					</template>
				</BasicTableFrom>
			</div>

			<!-- 表格 -->
			<BasicTable
				:data="tableData"
				:option="tableColumns"
				:table-loading="loading"
				v-model:page="page"
			/>
		</div>
	</template>
</template>

/* eslint-disable */
<script setup lang="ts">
import { ref, computed, watch } from 'vue';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	fleetInfo: {
		type: Object,
		default: () => ({}),
	},
	isInner: {
		type: Boolean,
		default: false,
	},
});

const emit = defineEmits(['update:modelValue']);

const drawerVisible = ref(false);
const loading = ref(false);

// 搜索表单配置
const formList = computed(() => [
	{
		key: 'timeRange',
		type: 'datetimerange',
		label: '运单时段:',
		placeholder: '请选择时段',
		clearable: true,
		props: {
			type: 'daterange',
			startPlaceholder: '开始日期',
			endPlaceholder: '结束日期',
		},
	},
]);

// 分页配置
const page = ref({
	currentPage: 1,
	pageSize: 10,
	total: 0,
});

// 计算标题
const title = computed(() => {
	return `${props.fleetInfo?.fleetName || ''} - 运单列表`;
});

// 表格配置
const tableColumns = {
	showOverflowTooltip: true,
	border: true,
	column: [
		{ type: 'index', label: '序号', width: 60, align: 'center' },
		{ prop: 'tripNo', label: '运单编号', minWidth: 150 },
		{ prop: 'startLocation', label: '起始地点', minWidth: 120 },
		{ prop: 'endLocation', label: '目的地', minWidth: 120 },
		{ prop: 'transportStatus', label: '运输状态', minWidth: 100 },
		{ prop: 'companyName', label: '运输企业', minWidth: 150 },
		{ prop: 'driverName', label: '司机', minWidth: 100 },
		{ prop: 'driverPhone', label: '联系电话', minWidth: 120 },
		{ prop: 'plateNumber', label: '车牌号', minWidth: 120 },
		{ prop: 'transportType', label: '计价方式', minWidth: 100 },
		{ prop: 'amount', label: '运费金额(元)', minWidth: 120 },
		{ prop: 'planStartTime', label: '计划发车时间', minWidth: 150 },
		{ prop: 'planEndTime', label: '计划到达时间', minWidth: 150 },
		{ prop: 'actualStartTime', label: '实际发车时间', minWidth: 150 },
		{ prop: 'actualEndTime', label: '实际到达时间', minWidth: 150 },
		{ prop: 'loadingTime', label: '装货时间', minWidth: 150 },
		{ prop: 'unloadingTime', label: '卸货时间', minWidth: 150 },
		{ prop: 'creator', label: '创建人', minWidth: 100 },
		{ prop: 'createTime', label: '创建时间', minWidth: 150 },
		{
			label: '操作',
			width: 80,
			fixed: 'right',
			slot: 'menu',
		},
	],
};

// 模拟数据
const tableData = ref([
	{
		tripNo: 'YD20250510001',
		startLocation: '蒲江（德士）',
		endLocation: '都江堰',
		transportStatus: '待接单',
		companyName: 'XXXX运输公司',
		driverName: '张三',
		driverPhone: '135XXXXXXXX',
		plateNumber: 'JIA0515D',
		transportType: '单趟计价',
		amount: 200,
		planStartTime: '2025-5-1 09:20:00',
		actualStartTime: '2025-5-1 09:20:00',
		loadingTime: '2025-4-30 18:30',
		unloadingTime: '2025-4-30 11:00',
		creator: '面单一',
		createTime: '2025-4-30',
	},
]);

// 监听抽屉显示状态
watch(
	() => props.modelValue,
	(val) => {
		drawerVisible.value = val;
		if (val) {
			loadData();
		}
	},
);

// 监听抽屉关闭
watch(drawerVisible, (val) => {
	emit('update:modelValue', val);
});

// 加载数据
const loadData = () => {
	loading.value = true;
	// TODO: 这里调用接口获取数据
	setTimeout(() => {
		loading.value = false;
		page.value.total = 100; // 模拟总数据量
	}, 500);
};

// 搜索
const handleSearch = (data) => {
	console.log('Search with:', data);
	page.value.currentPage = 1;
	loadData();
};

// 导出
const handleExport = () => {
	console.log('导出数据');
	// TODO: 实现导出功能
};

// 关闭抽屉
const handleClose = () => {
	drawerVisible.value = false;
};
</script>
/* eslint-enable */
